﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>   
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>        
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/form/ctp.form.js">
        </script>		
        <script type="text/javascript" src="../../js/ctp/checkboxgroup/ctp.ui.checkboxgroup.js">                    
        </script>		
        <script type="text/javascript" src="../../js/ctp/radiogroup/ctp.ui.radiogroup.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/checkbox/ctp.ui.checkbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/listview/ctp.ui.listview.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/checkboxgroup/ctp.ui.checkboxgroup.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/checkbox/ctp.ui.checkbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/tabs/ctp.ui.tabs.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/radiogroup/ctp.ui.radiogroup.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/radio/ctp.ui.radio.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/textarea/ctp.ui.textarea.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/rte/ctp.ui.rte.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/colormenu/ctp.ui.colormenu.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/fileupload/ctp.ui.fileupload.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
		</script>
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/checkboxgroup.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/radiogroup.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/label.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/form.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/listview.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/tabs.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/radiogroup.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/radio.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/checkboxgroup.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/checkbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/textarea.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/rte.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/colormenu.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/fileupload.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/validator.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/checkbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <script>
			//ctp.core.log.lvl=ctp.core.loglvl.info;
            $(document).ready(function(){
				var groupbox1=new ctp.ui.groupbox({
			  	    id: 'groupbox1',
					icon: 'arrow',						
					items:[],
					onCollapse:function(){alert("onCollapse");},
					onSpread:function(){alert("onHide");},
					title:'上下箭头'						   
			     });
				 var checkbox1 = new ctp.ui.checkbox({
				 	id: 'checkbox1',
					label: '复选按钮'
				 });
				 var groupbox2=new ctp.ui.groupbox({
			  	    id: 'groupbox2',
					icon: checkbox1,
					onCollapse:function(){alert("onCollapse");},
					onSpread:function(){alert("onHide");},						
					items:[]					   
			     });
				var button1= new ctp.ui.button({
                    id: 'button1',
                    text: '取得两组件ID',
                    width: '100%',
                    onClick: function(){						
						ctpMSB.alert({title:'信息提示',message:groupbox1.getId()+","+groupbox2.getId()});                       
                    }
                });
				var button2= new ctp.ui.button({
                    id: 'button2',
                    text: '取得两组件名称',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:groupbox1.getName()+","+groupbox2.getName()});						                        
                    }
                });
				var button3= new ctp.ui.button({
                    id: 'button3',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:groupbox1.getCtpWebType()});                      
                    }
                });
				var button4= new ctp.ui.button({
                    id: 'button4',
                    text: '取得两组件Dom ID',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:groupbox1.getDomId()+","+groupbox2.getDomId()});                      
                    }
                });
				var button5= new ctp.ui.button({
                    id: 'button5',
                    text: '取得两组件内容区域ID',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:groupbox1.getContentDomId()+","+groupbox2.getContentDomId()});                      
                    }
                });
				var button6= new ctp.ui.button({
                    id: 'button6',
                    text: '追加组件到左groupbox',
                    width: '100%',
                    onClick: function(){						  
						groupbox1.append(new ctp.ui.textfield({width:'90%'}));
                    }
                });
				var button7= new ctp.ui.button({
                    id: 'button7',
                    text: '追加组件到右groupbox',
                    width: '100%',
                    onClick: function(){						  
						groupbox2.append(new ctp.ui.textfield({width:'90%'}));
                    }
                });
				var button8= new ctp.ui.button({
                    id: 'button8',
                    text: '重置子组件输入内容',
                    width: '100%',
                    onClick: function(){						  
						groupbox1.reset();
						groupbox2.reset();
                    }
                });
				var spread1 = true;
				var button9= new ctp.ui.button({
                    id: 'button9',
                    text: '折叠/展开左groupbox',
                    width: '100%',
                    onClick: function(){						  
						spread1 && groupbox1.collapse();
						!spread1 && groupbox1.spread();
						spread1 = !spread1;
                    }
                });
				var spread2 = true;
				var button10= new ctp.ui.button({
                    id: 'button10',
                    text: '折叠/展开右groupbox',
                    width: '100%',
                    onClick: function(){						  
						spread2 && groupbox2.collapse();
						!spread2 && groupbox2.spread();
						spread2 = !spread2;
                    }
                });
				var button11= new ctp.ui.button({
                    id: 'button11',
                    text: '设置标题',
                    width: '100%',
                    onClick: function(){						  
						groupbox1.setTitle('新标题1');
						groupbox2.setTitle('新标题2');
                    }
                });
				var button12= new ctp.ui.button({
                    id: 'button12',
                    text: '取得两组件标题',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:groupbox1.getTitle()+","+groupbox2.getTitle()});   
                    }
                });
				var button13= new ctp.ui.button({
                    id: 'button13',
                    text: '设置组件宽度',
                    width: '100%',
                    onClick: function(){						  
						groupbox1.setWidth('100px');   
                    }
                });
				var hidden = false;
				var button14= new ctp.ui.button({
                    id: 'button14',
                    text: '隐藏/显示',
                    width: '100%',
                    onClick: function(){						  
						hidden && groupbox1.show();   
						!hidden && groupbox1.hide(); 
						hidden = !hidden;
                    }
                });
				var button15= new ctp.ui.button({
                    id: 'button15',
                    text: '删除groupbox下的组件',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({
                            title: '信息提示',
                            message: "删除组件的id是"+groupbox1.delObjs().join()
                        });      					
                    }
                });
				var button16= new ctp.ui.button({
                    id: 'button16',
                    text: '删除groupbox组件',
                    width: '100%',
                    onClick: function(){						  
						groupbox1.remove();					
                    }
                });
				var button17= new ctp.ui.button({
                    id: 'button17',
                    text: '设置groupbox组件高度',
                    width: '100%',
                    onClick: function(){						  
						groupbox1.setHeight(150);					
                    }
                });
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '80%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: groupbox1},{element: groupbox2}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
						 [{element: button4},{element: button5},{element: button6}],
						 [{element: button7},{element: button8},{element: button9}],
						 [{element: button10},{element: button11},{element: button12}],
						 [{element: button13},{element: button14},{element: button15}],
						 [{element: button16},{element: button17}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'groupbox实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });            
            });
        </script>
    </head>
    <BODY>
    	<b>ctp.ui.groupbox实例</b>
		<hr/>
		<br/>
	</BODY>
</html>